<template>
	<view class="">
		<scroll-view class="topbar" :scroll-x="true" :scroll-into-view="viewid">
			<view 
			:id="'scr'+index" 
			v-for="(item,index) in topbar" 
			:key="item.id" 
			class="barbox" 
			@click="onselected(index)">
				<text class="bartext" :class="topbarIndex===index?'f-active-color':''">{{item.name}}</text>
			</view>
		</scroll-view>
		
		
		<swiper
		:current="topbarIndex" 
		@change="changecurrent" 
		:style="'height:'+clientheight+'px;'"
		ref="swiper"
		>
			<swiper-item v-for="(item,index) in topbar" :key="item.id" v-if="topbar.length>0">
				<template v-if="item.key">
					<scroll-view :scroll-y="true" :style="'height:'+clientheight+'px'" class="test">
						<view class="pagedata">
							<swiperbox :img="item.swiper"></swiperbox>
							<recommend></recommend>
							<titlecard title="户外运动"></titlecard>
							<goodsrec></goodsrec>
							<titlecard title="猜你喜欢"></titlecard>
							<commoditylist></commoditylist>
						</view>
					</scroll-view>
				</template>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import swiperbox from '@/components/index/swiper.vue';
import recommend from '@/components/index/recommend.vue';
import titlecard from '@/components/index/titlecard.vue';
import commoditylist from '@/components/index/commoditylist.vue'
import goodsrec from '@/components/index/goodsrec.vue'
export default{
	data(){
		return {
			viewid:"scr0",
			topbarIndex:0,
			topbar:[],
			clientheight:0,
		}
	},
	onLoad(){
		this.getItem()
		this.getClientHeight()
	},
	methods:{
		onselected(index){
			this.topbarIndex = index
		},
		changecurrent(event){
			this.viewid = 'scr'+event.detail.current
			this.topbarIndex = event.detail.current
			if(this.topbar[this.topbarIndex].key){
				return
			}else{
				uni.request({
					url: `http://localhost:3000/index/${this.topbar[this.topbarIndex].english}`,
					dataType: "json",
					success:(res)=>{
						this.topbar[this.topbarIndex] = {...this.topbar[this.topbarIndex],...res.data.data}
						console.log(this.topbar[this.topbarIndex])
					}
				})
			}
		},
		async getItem(){
			await this.getTopbar()
			uni.request({
				url: 'http://localhost:3000/index/recommend',
				dataType: 'json',
				success:(re)=>{
					for(let i = 0;i<this.topbar.length;i++){
						if(this.topbar[i].id === re.data.data.id){
							this.topbar[i] = {...this.topbar[i],...re.data.data}
							console.log(this.topbar[i])
						}
					}
				}
			})
		},
		getTopbar(){
			return new Promise((resolve,reject)=>{
				uni.request({
					url:'http://localhost:3000/index/topbar',
					dataType:"json",
					success:(res)=>{
						console.log(res.data.data)
						this.topbar = [...res.data.data.topbar]
						resolve()
					}
				})
			})
		},
		getClientHeight(){
			let system = ''
			uni.getSystemInfo({
				success:(res)=>{
					system = res.osName
				}
			})
			if(system === 'ios'){
				this.clientheight = uni.getWindowInfo().windowHeight - uni.getWindowInfo().statusBarHeight - uni.upx2px(90)
			}else if (system = 'android'){
				this.clientheight = uni.getWindowInfo().windowHeight - uni.upx2px(90)
			}else {
				this.clientheight = uni.getWindowInfo().windowHeight
			}
		}
	},
	components:{
		swiperbox,
		recommend,
		titlecard,
		commoditylist,
		goodsrec
	}
}
</script>

<style lang="scss" scoped>
	.topbar{
		width: 100%;
		height: 90rpx;
		white-space: nowrap;
	}
	.barbox{
		display: inline-block;
		box-sizing: border-box;
		height: 100%;
		width: 160rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.f-active-color{
		border-bottom: 6rpx solid #49bdfb;
	}
	.bartext{
		line-height: 90rpx;
	}
</style>